<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="./images/logo/favicon2.ico">
    <link rel="stylesheet" href="./layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="./layuiadmin/layui/css/admin.css" media="all">
    <link rel="stylesheet" href="./css/custom.css" media="all">
    <style>
        .navIcon {
            width: 16px;
            padding-top: 11px;
        }
    </style>

    <script src="../../js/jquery.3.5.1.js"></script>
    <script src="./data.js"></script>
    <script>
        $(function () {
            var html = '';
            views.forEach(function (item, index) {
                html += `
                    <li data-name="app" class="layui-nav-item">
                        <a href="javascript:;" lay-tips="" lay-direction="2">
                            <img class="layui-icon navIcon" src="${item.img}" />
                            <cite>${item.title}</cite>
                        </a>
                        <dl class="layui-nav-child">
                `;
                var htmlItems = ""
                item.items.forEach(function (item_) {
                    htmlItems += `<dd><a lay-href="${item_.href}">${item_.name}</a></dd>`
                })
                html += htmlItems + `</dl></li>`;
            })
            $("#LAY-system-side-menu").append(html)
        })
    </script>
</head>

<body>
    <div id="LAY_app">
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <!-- 头部区域 -->
                <ul class="layui-nav layui-layout-left">
                    <li class="layui-nav-item layadmin-flexible" lay-unselect>
                        <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
                            <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
                        </a>
                    </li>
                    <li class="layui-nav-item" lay-unselect>
                        <a href="javascript:;" layadmin-event="link" title="链接">
                            <i class="layui-icon layui-icon-link" style="position: relative;">
                                <span class="layui-badge-rim" id="layui_link">0</span>
                            </i>
                        </a>
                    </li>
                    <li class="layui-nav-item" lay-unselect>
                        <a href="javascript:;" layadmin-event="refresh" title="刷新">
                            <i class="layui-icon layui-icon-refresh-3"></i>
                        </a>
                    </li>
                </ul>
                <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
                    <li class="layui-nav-item" lay-unselect>
                        <a href="javascript:;">
                            <cite>admin&nbsp;&nbsp;<text id="UserName">admin</text></cite>
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a lay-href="set/user/info.html">基本资料</a></dd>
                            <dd><a lay-href="../sys_Account/setpassword">修改密码</a></dd>
                            <hr>
                            <dd style="text-align: center;"><a href="../sys_Account/IS4Logout">退出</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>

            <!-- 侧边菜单 -->
            <div class="layui-side layui-side-menu">
                <div class="layui-side-scroll">
                    <div class="layui-logo" lay-href="home/console.html">
                        <span>layui 布局展示</span>
                    </div>

                    <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu"
                        lay-filter="layadmin-system-side-menu">
                        <!-- <li data-name="app" class="layui-nav-item">
                            <a href="javascript:;" lay-tips="@menu.MenuName" lay-direction="2">
                                <img class="layui-icon navIcon" src="./images/BC跨境电商进口 .png" />
                                <cite>入门</cite>
                            </a>
                            <dl class="layui-nav-child">
                                <dd>
                                    <a lay-href="http://www.baidu.com">基本用法</a>
                                </dd>
                            </dl>
                        </li> -->
                    </ul>
                </div>
            </div>

            <!-- 页面标签 -->
            <div class="layadmin-pagetabs" id="LAY_app_tabs">
                <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
                <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
                <div class="layui-icon layadmin-tabs-control layui-icon-down">
                    <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
                        <li class="layui-nav-item" lay-unselect>
                            <a href="javascript:;"></a>
                            <dl class="layui-nav-child layui-anim-fadein">
                                <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
                                <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
                                <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
                    <ul class="layui-tab-title" id="LAY_app_tabsheader">
                        <li lay-id="home/console.html" lay-attr="home/console.html" class="layui-this">
                            <i class="layui-icon layui-icon-home"></i>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 主体内容 -->
            <div class="layui-body" id="LAY_app_body">
                <div class="layadmin-tabsbody-item layui-show">
                    <iframe src="./template/home.html" frameborder="0" class="layadmin-iframe"></iframe>
                </div>
            </div>

            <!-- 辅助元素，一般用于移动设备下遮罩 -->
            <div class="layadmin-body-shade" layadmin-event="shade"></div>
        </div>
    </div>

    <script src="./layuiadmin/layui/layui.js"></script>
    <script src="./layuiadmin/modules/layui_ext.js"></script>
    <script>
        layui.config({
            base: "./layuiadmin/"
        }).extend({
            index: 'lib/index', //主入口模块
        }).use(['index', 'jquery'], function () {
            //鼠标滚轮点击关闭
            $("#LAY_app_tabsheader").on('mousedown', 'li', function (e) {
                if (e.which == 2) {
                    $(this).find('.layui-tab-close').trigger('click');
                }
            });
        })
    </script>
</body>

</html>